<template>
  <div>
    <!--  根据条件查询-->
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="选择一级种类名称:">
          <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)">
            <el-option value='' label="请选择"></el-option>
            <el-option @click.native="getPid(item.pid)"
                       v-for="item in fileKind"
                       :key="item.id"
                       :label="item.kindName"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
          <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind2"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
          <el-select v-model="value3" placeholder="选择三级种类">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind3"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--      <el-form-item label="产品名称:">-->
        <!--        <el-input v-model="name" placeholder="产品名称"></el-input>-->
        <!--      </el-form-item>-->

        <el-form-item>
          <el-button type="primary" @click="init">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    表格-->
    <div>
      <el-table
          :data="productProcessData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="productId"
            label="产品编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="productName"
            label="产品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="firstKindName"
            label="产品I级分类名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="secondKindName"
            label="产品II级分类名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="thirdKindName"
            label="产品III级分类名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="procedureDescribe"
            label="设计要求"
            width="200">
        </el-table-column>
        <el-table-column
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页    -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>

    <!--   工序 弹出框-->
    <div>
      <el-dialog title="制定工序设计单:" :visible.sync="dialogVisible">
        <el-form ref="form" :model="form">
          <el-form-item label="工序单编号:" label-width="120px">
            <b>{{ form.designId }}</b>
          </el-form-item>
          <el-form-item label="设计人:" label-width="120px">
            <b>{{ form.register }}</b>
          </el-form-item>
          <el-form-item label="产品名称:" label-width="120px">
            <b>{{ form.productName }}</b>
          </el-form-item>
          <el-form-item label="产品编号:" label-width="120px">
            <b>{{ form.productId }}</b>
          </el-form-item>

          <!--        表格-->
          <el-table
              :data="productProductionProcessDetailData"
              border
              style="width: 100%">
            <el-table-column
                fixed
                prop="procedureName"
                label="工序名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="procedureId"
                label="工序编号"
                width="120">
            </el-table-column>
            <el-table-column
                prop="procedureDescribe"
                label="描述"
                width="150">
            </el-table-column>
            <el-table-column
                prop="labourHourAmount"
                label="工时数(小时)"
                width="150">
            </el-table-column>
            <el-table-column
                prop="subtotal"
                label="工时成本小计(元)"
                width="150">
            </el-table-column>
            <el-table-column
                prop="moduleSubtotal"
                label="物料成本小计"
                width="200">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="150">
              <template slot-scope="scope">
                <p>
                  <el-button @click="handleClick4(scope.row)" type="text" size="medium">查看</el-button>
                </p>
              </template>
            </el-table-column>
          </el-table>


          <el-form-item label="工时总成本:" label-width="120px">
            <b>{{ form.costPriceSum }}</b>
          </el-form-item>
          <el-form-item label="物料总成本:" label-width="120px">
            <b>{{ form.moduleCostPriceSum }}</b>
          </el-form-item>
          <el-form-item label="设计要求:" label-width="120px">
            <b>{{ form.procedureDescribe }}</b>
          </el-form-item>
          <el-form-item label="审核人:" label-width="120px">
            <b>{{ form.checker }}</b>
          </el-form-item>
          <el-form-item label="审核时间:" label-width="120px">
            <b>{{ form.checkTime }}</b>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="commitProcedure('G002-0')">拒绝审核</el-button>
          <el-button type="primary" @click="commitProcedure('G002-2')">通过审核</el-button>
        </div>
      </el-dialog>


    </div>

    <!--    工序 物料设计单-->
    <div>
      <el-dialog title="工序物料设计单" :visible.sync="dialogVisible2">
        <p>制造:<b>{{ productName }}</b>产品,供选择的物料清单如下:</p>
        <el-table
            :data="materialDetailsData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="productName"
              label="物料名称"
              width="150">
          </el-table-column>
          <el-table-column
              prop="productId"
              label="物料编号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="productDescribe"
              label="描述"
              width="150">
          </el-table-column>
          <!--          &&materialDetailsData.amount!=null-->
          <el-table-column
              v-if="materialDetailsData==null||(materialDetailsData.amount!=''&&materialDetailsData.amount!=null)"
              prop="amount"
              label="设计数量"
              width="150">
          </el-table-column>
          <!--          -->
          <el-table-column
              v-if="materialDetailsData==null||(materialDetailsData.residualAmount!=''&&materialDetailsData.residualAmount!=null)"
              prop="residualAmount"
              label="可用数量"
              width="150">
          </el-table-column>
          <el-table-column
              prop="amountUnit"
              label="单位"
              width="200">
          </el-table-column>
          <el-table-column
              prop="costPrice"
              label="单价(元)"
              width="200">
          </el-table-column>
          <el-table-column
              prop="numberOfProcesses"
              label="本工序数量"
              width="200">
            <template slot-scope="scope">
              <el-input v-model="materialDetailsData[scope.$index].numberOfProcesses"
                        @input="judgment(materialDetailsData[scope.$index].numberOfProcesses,materialDetailsData[scope.$index].residualAmount)"
                        disabled="disabled"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="handleClick3">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--    工序物料设计单展示-->
    <div>
      <!--      <el-dialog title="工序物料展示" :visible.sync="dialogVisible3">-->
      <!--        <el-form>-->
      <!--          <el-form-item label-width="120px" label="工序单编号:">-->
      <!--            <b>{{form2.procedureId}}</b>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="工序名称:" label-width="120px">-->
      <!--            <b>{{form2.procedureName}}</b>-->
      <!--          </el-form-item>-->
      <!--&lt;!&ndash;          <el-form-item label-width="120px" label="工序登记人:">&ndash;&gt;-->
      <!--&lt;!&ndash;            <b>{{form2.register}}</b>&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--&lt;!&ndash;          <el-form-item label="登记时间:" label-width="120px">&ndash;&gt;-->
      <!--&lt;!&ndash;            <b>{{form2.registerTime}}</b>&ndash;&gt;-->
      <!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
      <!--        </el-form>-->
      <!--      </el-dialog>-->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../request.js"

export default {
  name: "ProcedureFileCheck",
  data() {
    return {
      flag: '',
      productName: '',
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      pid: '',
      value: '',
      value2: '',
      value3: '',
      fileKind: [],
      fileKind2: [],
      fileKind3: [],
      pageNum: '',
      pageSize: '',
      total: '',
      //  name:'',
      productProcessData: [],
      //弹出框设计单对象数据
      form: {},
      //工序设计对象数据
      form2: {},
      // 产品生产工序明细数据
      productProductionProcessDetailData: [],
      //物料详细数据
      materialDetailsData: [],
      //产品ID
      productId: '',
      materialDetailsID: '',
      //工序详情ID:
      id: ''
    }
  }, methods: {
    commitProcedure(tag) {
      console.log(this.productProductionProcessDetailData);
      this.form.designModuleTag = tag;
      let map = {
        //工序详情
        'procedureDetails': this.productProductionProcessDetailData,
        'procedures': this.form
      }
      axios.post("http://localhost:8150/design-procedure-module/checkProcedureModule", map).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        if (data.data.flag) {
          this.init();
        }
        this.$message({
          showClose: true,
          message: data.data.message,
          type: data.data.flag == true ? 'success' : "error"
        });
      })
      this.dialogVisible = false;
    },
    changeLevel3(id) {
      //  console.log(id)
      let a = 0;
      for (let i = 0; i < this.fileKind2.length; i++) {
        for (let j = 0; j < this.fileKind2[i].list.length; j++) {
          if (id == this.fileKind2[i].list[j].pid) {
            // console.log(this.fileKind2[i].list[j].pid)
            this.fileKind3[a] = this.fileKind2[i].list[j];
            a++;
          } else {
            this.fileKind3 = [];
            this.value3 = '';
          }
        }
      }
    }, getPid(id) {
      this.pid = id;
    },//获取下拉框的值
    getSelectValue() {
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind = data.data.data;
        this.fileKind11 = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    }, handleClose() {
      this.fileDataDetail = {};
      this.dialogVisible = false;
    },
    changeLevel2(id) {
      // console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind.length; i++) {
        for (let j = 0; j < this.fileKind[i].list.length; j++) {
          if (id === this.fileKind[i].list[j].pid) {
            this.fileKind2[a] = this.fileKind[i].list[j];
            a++;
          } else {
            this.fileKind2 = [];
            this.fileKind3 = [];
            this.value2 = '';
            this.value3 = '';
          }
        }

      }
    },
    //初始化数据,查询产品生产工序
    init() {
      axios.get("http://localhost:8150/design-procedure/queryProcedure", {
        params: {
          'pageSize': this.pageSize,
          'pageNum': this.pageNum,
          'firstId': this.value,
          'secondId': this.value2,
          'threeId': this.value3,
          'checkTag': 'S001-1',
          'designModuleTag': 'G002-1'
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.productProcessData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    //分页,改变数量大小
    handleSizeChange(val) {
      this.pageSize = val;
      //  console.log(`每页 ${val} 条`);
      this.init();
    },//处理当前变化,上一页和下一页
    handleCurrentChange(val) {
      this.pageNum = val;
      //  console.log(`当前页: ${val}`);
      this.init();
    },//设计单制作
    handleClick(row) {
      this.dialogVisible = true;
      //   console.log(row)
      //工序编号
      this.form.id = row.id;
      //工序单号
      this.form.designId = row.designId;
      //设计人
      this.form.register = row.register;
      //产品名称
      this.form.productName = row.productName;
      this.productName = row.productName;
      //产品编号'
      this.productId = row.productId;
      this.form.productId = row.productId;
      //工时总成本
      this.form.costPriceSum = row.costPriceSum;
      //物料总成本
      this.form.moduleCostPriceSum = row.moduleCostPriceSum;
      //设计要求
      this.form.procedureDescribe = row.procedureDescribe;
      //审核人
      this.form.checker = row.checker;
      //审核时间
      this.form.checkTime = row.checkTime;
      //获取详细信息
      axios.get("http://localhost:8150/design-procedure/queryById", {
        params: {
          'id': row.productId
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.productProductionProcessDetailData = data.data.data.list;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
      //第二个弹出框下面的方法
    }, handleClick2(row) {
      // console.log(row)
      //物料详情ID
      this.materialDetailsID = row.id;
      //工序单号
      this.form2.procedureId = row.procedureId;
      //工序名称
      this.form2.procedureName = row.procedureName;
      //工序登记人
      this.form2.register = row.register;
      //登记时间
      this.form2.registerTime = row.registerTime;
      this.dialogVisible2 = true;
      axios.get("http://localhost:8150/design-procedure-module/queryModuleDetailByProductId", {
        params: {
          'productId': this.productId
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.materialDetailsData = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },//判断工序数量是否有大于可用工序数量
    judgment(value, value2) {
      if (Number(value) > Number(value2)) {
        this.$message({
          showClose: true,
          message: '工序数量不可大于可用工序数量',
          type: 'error'
        })

      }
    }, handleClick3() {

      //定义一个变量,如果他是需要重新设计,我们就需要来进行if判断中的方法
      if (this.flag == 'a') {
        this.$confirm('是否删除来重写设计?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogVisible2 = false;
          let data = this.materialDetailsData;
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          //工序模型数据
          let processModelData = {
            //工序物料序号
            detailsNumber: '',
            //物料ID
            productId: '',
            //物料名称
            productName: '',
            //本工序数量
            amount: '',
            //备注
            productDescribe: '',
            //单位
            amountUnit: '',
            //单价
            costPrice: '',
            //编号
            id: ''
          };
          //物料详情数据
          let materialModelData = {
            //物料名称
            productName: '',
            //物料编号
            productId: '',
            //备注
            productDescribe: '',
            //单位
            amountUnit: '',
            //数量
            amount: '',
            //可用数量
            residualAmount: '',
            //单价
            costPrice: ''
          };

          //定义两个数组来保存工序数据和物料数据
          //1.工序数据
          let data3 = [];
          //2.物料数据
          let data4 = [];
          let j = 1;
          for (let i = 0; i < data.length; i++) {
            //添加工序数据
            processModelData.detailsNumber = j;
            processModelData.id = data[i].id;
            processModelData.productId = data[i].productId;
            processModelData.productName = data[i].productName;
            processModelData.amount = data[i].numberOfProcesses;
            processModelData.productDescribe = data[i].productDescribe;
            processModelData.amountUnit = data[i].amountUnit;
            processModelData.costPrice = data[i].costPrice;
            data3.push(processModelData)
            //添加物料详情数据
            materialModelData.productName = data[i].productName;
            materialModelData.productId = data[i].productId;
            materialModelData.productDescribe = data[i].productDescribe;
            materialModelData.amountUnit = data[i].amountUnit;
            materialModelData.amount = data[i].amount;
            materialModelData.residualAmount = data[i].residualAmount;
            materialModelData.costPrice = data[i].costPrice;
            data4.push(materialModelData)
            j++;
          }
          let map = {
            'moduleDetails': data4,
            'procedureModules': data3,
            'productId': this.id,
            'productID': this.productId
          }

          axios.post("http://localhost:8150/design-procedure-module/deleteProcedureModule", map).then(data => {
            if (data.data.flag==false) {
              this.$message({
                showClose: true,
                message: data.data.message,
                type: data.data.flag == true ? "success" : "error"
              })
              return;
            }
            if (data.data.flag) {
              this.flag = "";
              this.materialDetailsData = [];
              axios.get("http://localhost:8150/design-procedure/queryById", {
                params: {
                  'id': this.productId
                }
              }).then(data => {
                if (data.data.flag==false) {
                  this.$message({
                    showClose: true,
                    message: data.data.message,
                    type: data.data.flag == true ? "success" : "error"
                  })
                  return;
                }
                this.productProductionProcessDetailData = data.data.data.list;
              }).catch(e => {
                alert("错误信息为:" + e)
              });

              axios.get("http://localhost:8150/design-procedure-module/queryModuleDetailByProductId", {
                params: {
                  'productId': this.productId
                }
              }).then(data => {
                if (data.data.flag==false) {
                  this.$message({
                    showClose: true,
                    message: data.data.message,
                    type: data.data.flag == true ? "success" : "error"
                  })
                  return;
                }
                this.materialDetailsData = data.data.data;
              }).catch(e => {
                alert("错误信息为:" + e)
              })
            }
            this.$message({
              showClose: true,
              message: data.data.message,
              type: data.data.flag == true ? 'success' : 'error'
            });
          }).catch(e => {
            alert("错误信息为:" + e)
          })


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        return;
      }
      this.dialogVisible2 = false;
      let data = this.materialDetailsData;
      //工序模型数据
      let processModelData = {
        //工序物料序号
        detailsNumber: '',
        //物料ID
        productId: '',
        //物料名称
        productName: '',
        //本工序数量
        amount: '',
        //备注
        productDescribe: '',
        //单位
        amountUnit: '',
        //单价
        costPrice: '',
      };
      //物料详情数据
      let materialModelData = {
        //物料名称
        productName: '',
        //物料编号
        productId: '',
        //备注
        productDescribe: '',
        //单位
        amountUnit: '',
        //数量
        amount: '',
        //可用数量
        residualAmount: '',
        //单价
        costPrice: ''
      };

      //定义两个数组来保存工序数据和物料数据
      //1.工序数据
      let data3 = [];
      //2.物料数据
      let data4 = [];
      let j = 1;
      for (let i = 0; i < data.length; i++) {
        //添加工序数据
        processModelData.detailsNumber = j;
        processModelData.productId = data[i].productId;
        processModelData.productName = data[i].productName;
        processModelData.amount = data[i].numberOfProcesses;
        processModelData.productDescribe = data[i].productDescribe;
        processModelData.amountUnit = data[i].amountUnit;
        processModelData.costPrice = data[i].costPrice;
        data3.push(processModelData)
        //添加物料详情数据
        materialModelData.productName = data[i].productName;
        materialModelData.productId = data[i].productId;
        materialModelData.productDescribe = data[i].productDescribe;
        materialModelData.amountUnit = data[i].amountUnit;
        materialModelData.amount = data[i].amount;
        materialModelData.residualAmount = data[i].residualAmount;
        materialModelData.costPrice = data[i].costPrice;
        data4.push(materialModelData)
        j++;
      }
      let map = {
        'moduleDetails': data4,
        'procedureModules': data3,
        'procedureDetailId': this.materialDetailsID
      }
      axios.post("http://localhost:8150/design-procedure-module/addProcedureModule", map).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        if (data.data.flag) {
          axios.get("http://localhost:8150/design-procedure/queryById", {
            params: {
              'id': this.productId
            }
          }).then(data => {
            if (data.data.flag==false) {
              this.$message({
                showClose: true,
                message: data.data.message,
                type: data.data.flag == true ? "success" : "error"
              })
              return;
            }
            this.productProductionProcessDetailData = data.data.data.list;
          }).catch(e => {
            alert("错误信息为:" + e)
          });

          axios.get("http://localhost:8150/design-procedure-module/queryModuleDetailByProductId", {
            params: {
              'productId': this.productId
            }
          }).then(data => {
            if (data.data.flag==false) {
              this.$message({
                showClose: true,
                message: data.data.message,
                type: data.data.flag == true ? "success" : "error"
              })
              return;
            }
            this.materialDetailsData = data.data.data;
          }).catch(e => {
            alert("错误信息为:" + e)
          })
        }
        this.$message({
          showClose: true,
          message: data.data.message,
          type: data.data.flag == true ? "success" : "error"
        });
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    }, handleClick4(row) {
      this.id = row.id;
      axios.get("http://localhost:8150/design-procedure-module/queryByProcedureDetailId", {
        params: {
          'procedureDetailId': row.id
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        //  console.log(data.data.data)
        let data2 = data.data.data;
        let modelData = {
          productId: '',
          productName: '',
          numberOfProcesses: '',
          productDescribe: '',
          amountUnit: '',
          costPrice: ''
        };
        /**
         * productId//产品ID
         productName//产品名
         numberOfProcesses//工序数量
         productDescribe//备注
         amountUnit//单位
         costPrice//价格
         */
        this.materialDetailsData = [];
        for (let i = 0; i < data2.length; i++) {
          modelData.id = data2[i].id;
          modelData.productId = data2[i].productId;
          modelData.productName = data2[i].productName;
          modelData.productDescribe = data2[i].productDescribe;
          modelData.amountUnit = data2[i].amountUnit;
          modelData.costPrice = data2[i].costPrice;
          modelData.numberOfProcesses = data2[i].amount;

          this.materialDetailsData.push(modelData)
        }
        //  this.materialDetailsData=data.data.data;
        this.dialogVisible2 = true;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    }
  }, created() {
    this.init();
    this.getSelectValue();
  }

}
</script>

<style scoped>

</style>